<template>
<div class="hd history">
		<div class="hd mt10">
			<img src="../../assets/banner03.png">
		</div>

		<div class="hd mt10">
			<sider-menu  :activeNumber="1"></sider-menu>
			<div class="right-content">
				<position style="padding:12px;width:auto;">
					<router-link to="/personal">个人中心</router-link>
					&gt;
					<span class="last">我的预约</span>
						<select-role @btnclick="selectFamilyHandle" class="fr"></select-role>
				</position>

				<div class="clearfix main mt20" style="padding:0;">
					<div class="center">
						<el-radio-group v-model="radio3" @change="radioChange">
							<el-radio-button v-for="(ra, i) in PAY_STATUS" :label="ra" :key="i"></el-radio-button>
						</el-radio-group>


					</div>
					<div v-if = "lists.length > 0" class="mt20">
				<div class="my_appointment" v-for="list in lists" :key="list.id">
					<div class="illness_name">
						<span class="t3">就诊人：</span>
						<span>{{list.regName}}</span>
							&nbsp;&nbsp;&nbsp;
							<span v-if="list.regVisitingNumber">
									<span class="t3">就诊序号：</span>
					      	<span class="f20 t6">{{list.regVisitingNumber}}</span>
							</span>
					</div>
					<div class="myappoint_ul" >
						<ul class="top">
							<li>
								<img src="../../assets/就诊科室.png" alt="">&nbsp;&nbsp;
								<span class="t3">就诊科室：</span>&nbsp;&nbsp;
								<span>{{list.regDeptName}}</span>
							</li>
						</ul>
						<ul class="middle">
							<li class="left">
								<img src="../../assets/医生.png" alt="">&nbsp;&nbsp;
								<span class="t3">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生：</span>&nbsp;&nbsp;
								<span class="name">{{list.doctorName}}</span>
							</li>
							<li class="right">
								<span class="t3">挂号费：</span>
								<span class="f20 t6">{{list.charge}}</span>
								<span>元</span>
							</li>
							<li class="state">
								<span class="t3">状态：</span>
								<span :class="[list.payStatus > 2 ? 't3' : 't1']">{{PAY_STATUS[list.payStatus]}}</span>
							</li>
						</ul>
						<ul  class="bottom">
							<li>
								<img src="../../assets/就诊时间.png" alt="">&nbsp;&nbsp;
								<span class="t3">就诊时间：</span>&nbsp;&nbsp;
								<span>{{list.workDate}} {{list.startTime}}-{{list.endTime}}</span>
							</li>
						</ul>
						<ul class="position_left_time" v-if="list.payStatus === '1'">
							<li v-if="list.regCloseTimeDisplay">
								<p>
									<left-time :displayTime="list.regCloseTimeDisplay" @outdate="list.canRepay=false"></left-time>
								</p>
								<a href="javascript:;" class="common-main-button" @click="rePay(list)" v-show="list.canRepay">
									前往支付
								</a>
							</li>
						</ul>
						<ul class="position_left_time" v-if="list.payStatus === '2' && list.mayCancle === '0'">
							<li>
								<a  href="javascript:;" class="common-sub-button" @click="cancelPay(list)">
									取消订单
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="no-data" v-else>
				暂无数据
			</div>

			<div class="border">

			</div>
			<div class="warn">
        <ul>
        <li>
          <img src="../../assets/warn.png" alt="">
          <span>温馨提示</span>
        </li>
        <li v-for="v in APPOINT_DESCRIPTION" :key="v">
          {{v}}
        </li>

        </ul>
				</div>

				</div>

			</div>
		</div>

	</div>

</template>

<script>
import {
  commonAjax,
  ORG_ID,
	PLATFORM_PREFIX,
	PAY_STATUS,
  APPOINT_DESCRIPTION
} from '../../api/api'
import Loading from '../../components/Loading'
import Position from '../../components/Position'
import LeftTime from '../../components/LeftTime'
import SelectRole from '../../components/SelectRole'
import SiderMenu from '../../components/SiderMenu'

export default {
	components: {Position, Loading, LeftTime, SelectRole, SiderMenu},
	data () {
		return {
			person: JSON.parse(localStorage.familyPerson),
			pageNo: 1,
			pageSize: 50,
			lists: [],
			defaultLists: [],
			PAY_STATUS: PAY_STATUS,
      APPOINT_DESCRIPTION: APPOINT_DESCRIPTION,
			radio3: '全部',
			canRepay: true
		}
	},
	mounted () {
		document.body.scrollTop = 0
		this.getHistorys(this.person.mpiId)
	},
	methods: {
		rePay (list) {
			localStorage.list = JSON.stringify(list)
			this.$router.push('/yygh/pay?from=myappoint')
		},
		cancelPay (list) {
			localStorage.orderToCancel = JSON.stringify(list)
			this.$router.push('/yygh/cancel-order')
		},
		getHistorys (mpiId) {
			if (!mpiId) {
				return
			}
			this.$store.commit('UPDATE_LOADING')
			commonAjax(
				[mpiId, '5', this.pageNo, this.pageSize, '1'],
				`${PLATFORM_PREFIX}.registrationService`,
				'getHistoryRegprepare'
			).then(res => {
				this.$store.commit('UPDATE_LOADING')
				if (res.data.code === 200) {
          res.data.body.forEach(v => {
            v.canRepay = true
						if (v.payStatus !== '2') {
							v.regVisitingNumber = ''
						}
          })
					this.defaultLists = res.data.body || []
					this.lists = res.data.body || []
				}
			}).catch(res => {
				this.$store.commit('UPDATE_LOADING')
				localStorage.removeItem('accessToken')
				this.$message({
					message: '登录失效',
					type: 'error'
				})
			})
		},
		selectFamilyHandle (f) {
			this.person = f
			this.getHistorys(f.mpiId)
		},
		radioChange (val) {
			let _this = this
			this.lists = this.defaultLists.filter((v, i) => {
				if (_this.PAY_STATUS[0] === val) return true
				return _this.PAY_STATUS[v.payStatus] === val
			})
		}
	}
}
</script>

<style lang="less">
.history{
.my_appointment{
		position: relative;
		padding: 20px;
		&:hover{
			background: #fff;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5)
		}
		border-top: 1px solid #FEF2E9;
	}
	.content .my_appointment img{
		vertical-align: middle;
	}
	.my_appointment .illness_name{
		height: 42px;
		line-height: 42px;
		margin:0 auto;
		border-bottom: 1px dashed #FEF2E9;
	}
	.my_appointment .illness_name span:nth-of-type(1){
			font-size: 14px;
			color: #666666;
	}
	.myappoint_ul .middle{
		overflow: hidden;
		margin-top: 10px;
		margin-left:20px;
	}
	.myappoint_ul .middle li{
		display: inline-block;
		width: 33%;
	}
	.myappoint_ul .top{
		margin-top: 20px;
		margin-left:20px;
	}
	.myappoint_ul .bottom{
		margin-left:20px;
		padding-bottom: 20px;
		margin-top: 10px;
	}
	.myappoint_ul .bottom span:nth-of-type(1){
		color: #999999;
	}

	.myappoint_ul .middle .name{
		display: inline-block;
	}

	.myappoint_ul .middle .right{
		width: 200px;
	}
	.myappoint_ul .middle .state span:nth-of-type(1){
		color: #666666;
	}
	.position_left_time{
		position: absolute;
		right: 60px;
		top: 70px;
	}
	.position_left_time span:nth-of-type(1){
		color: #ff9900;
	}
	.position_left_time span:nth-of-type(2){
		color: #993333;
	}
	.position_left_time div{
		width: 82px;
		line-height: 36px;
		text-align:center;
		background-color: rgb(146,59,29);
		border-radius: 4px;
		color: #ffffff;
		margin-left: 10px;
		cursor: pointer;
		&.cancel {
			background: #ccc;
			color:#fff;
		}
	}
	.border{
		height: 1px;
		background-color: #cccccc;
		margin:20px auto;
	}
	 .warn{
		margin: 20px;
		 li{
			color: #666666;
			margin-top: 10px;
		}
	}
}

</style>
